<template>
  <div class="list">
    <div class="title">推荐歌单</div>
    <div class="all-list">
      <div class="list-item" v-for="item in SongList">
        <img src="../../assets/img/music/song/bg.jpg" alt="" />
        <div class="text">{{item}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props:{
    
  },
  data() {
    return {
      SongList:9
    };
  },
  methods: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  font-size: 18px;
  padding: 10px 0 10px 5px;
}
.all-list {
  display: flex;
  overflow-y: hidden;
  overflow-x: scroll;
}
.list-item{
  margin-left: 5px;
}
.list-item img{
  width: 90px;
  height: 120px;
  border: solid 1px #333;
  
}
</style>
